<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/7/11 10:16
 -->
<template>
  <div>
    <monitor :node-list.sync="data.nodeList" :line-list.sync="data.lineList">
      <template #default="{ nodeList }">
        <el-popover
          v-for="(item, index) in nodeList"
          :key="index"
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        >
          <div
            :id="item.id"
            slot="reference"
            class="figure-circle-item"
            :data-id="item.id"
            :style="{ left: `${item.x}px`, top: `${item.y}px` }"
          >
            <div class="figure-circle">
              <span :class="['figure-circle-label', `figure-circle-label--${item.position}`]">{{ item.label }}</span>
            </div>
          </div>
        </el-popover>
      </template>

      <template #right="{ nodeList }">
        <div
          v-for="(item, index) in nodeList"
          :id="item.id"
          :key="index"
          class="figure-circle-item"
          :data-id="item.id"
          :style="{ left: `${item.x}px`, top: `${item.y}px` }"
        >
          <div class="figure-circle">
            <span :class="['figure-circle-label', `figure-circle-label--${item.position}`]">{{ item.label }}</span>
          </div>
        </div>
      </template>
    </monitor>
  </div>
</template>

<script>
import Monitor from './components/index'
export default {
  components: {
    Monitor
  },

  data() {
    return {
      data: {
        nodeList: [],
        lineList: []
      }
    }
  },

  mounted() {
    this.data = {
      nodeList: [
        { id: '采集点', label: '采集点', x: 100, y: 120, position: 'bottom', type: 'circle', area: 'A' },
        { id: '存储库', label: '存储库', x: 100, y: 120, position: 'bottom', type: 'circle', area: 'B' },
        { id: 'hive', label: 'hive', x: 300, y: 20, position: 'right', type: 'circle', area: 'B' },
        { id: 'ods', label: 'ods', x: 300, y: 120, position: 'bottom', type: 'circle', area: 'B' },
        { id: 'rdr', label: 'rdr', x: 550, y: 30, position: 'bottom', type: 'circle', area: 'B' },
        { id: 'cdr', label: 'cdr', x: 550, y: 120, position: 'bottom', type: 'circle', area: 'B' },
        { id: 'odr', label: 'odr', x: 550, y: 210, position: 'bottom', type: 'circle', area: 'B' },

        { id: 'BI', label: 'BI', x: 200, y: 30, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EMPI', label: 'EMPI', x: 200, y: 100, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EHR', label: 'EHR', x: 200, y: 170, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'CDA', label: 'CDA', x: 200, y: 240, position: 'bottom', type: 'circle', area: 'C' },

        { id: 'BI1', label: 'BI1', x: 200, y: 310, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EMPI1', label: 'EMPI1', x: 200, y: 380, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EHR1', label: 'EHR1', x: 200, y: 450, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'CDA1', label: 'CDA1', x: 200, y: 520, position: 'bottom', type: 'circle', area: 'C' },

        { id: 'BI2', label: 'BI2', x: 200, y: 590, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EMPI2', label: 'EMPI2', x: 200, y: 660, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'EHR2', label: 'EHR2', x: 200, y: 730, position: 'bottom', type: 'circle', area: 'C' },
        { id: 'CDA2', label: 'CDA2', x: 200, y: 800, position: 'bottom', type: 'circle', area: 'C' }
      ],

      lineList: [
        { from: '采集点', to: '存储库', label: '传输', anchors: ['Right', 'Left'], arrow: true },
        { from: '存储库', to: 'ods', label: '映射', anchors: ['Right', 'Left'], arrow: true },
        { from: 'hive', to: 'ods', label: '映射', anchors: ['Bottom', 'Top'], arrow: false },
        { from: 'ods', to: 'rdr', label: '下发', anchors: ['Right', 'Left'], arrow: true },
        { from: 'ods', to: 'cdr', label: '下发', anchors: ['Right', 'Left'], arrow: true },
        { from: 'ods', to: 'odr', label: '下发', anchors: ['Right', 'Left'], arrow: true },

        { from: 'cdr', to: 'BI', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EMPI', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EHR', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'CDA', anchors: ['Right', 'Left'], arrow: true },

        { from: 'cdr', to: 'BI1', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EMPI1', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EHR1', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'CDA1', anchors: ['Right', 'Left'], arrow: true },

        { from: 'cdr', to: 'BI2', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EMPI2', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'EHR2', anchors: ['Right', 'Left'], arrow: true },
        { from: 'cdr', to: 'CDA2', anchors: ['Right', 'Left'], arrow: true }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.figure-circle-item {
  width: fit-content;
  height: fit-content;
  position: absolute;
  z-index: 10;
  font-size: 0;
  text-align: center;
  $circle-width: 40px;
  $gutter-width: 2px;

  .figure-circle {
    display: inline-block;
    width: $circle-width;
    height: $circle-width;
    border-radius: 50%;
    border: 1px solid #8c8c8c;
  }

  .figure-circle-label {
    font-size: 12px;
    width: $circle-width;
    display: inline-block;

    &.figure-circle-label--top {
      position: absolute;
      bottom: calc(#{$circle-width} + #{$gutter-width});
      left: 0;
      text-align: center;
    }

    &.figure-circle-label--right {
      position: absolute;
      left: calc(#{$circle-width} + #{$gutter-width});
      display: flex;
      align-items: center;
      min-height: $circle-width;
      text-align: left;
    }

    &.figure-circle-label--bottom {
      position: absolute;
      top: calc(#{$circle-width} + #{$gutter-width});
      left: 0;
      text-align: center;
    }

    &.figure-circle-label--left {
      position: absolute;
      right: calc(#{$circle-width} + #{$gutter-width});
      top: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: $circle-width;
      text-align: right;
    }
  }
}
</style>
